<template>
  <div>
    <div id="gameContainer" @contextmenu.prevent="">
    </div>
    <div class="q-pa-sm"
         v-touch-pan.prevent.mouse="handlePan"
         id="board"
         style="position: fixed; margin: auto; left: 0; right: 0; background-color: black; width: 500px; height: 100px">
      <q-btn flat round :icon="visible ? 'visibility' : 'visibility_off'" @click="visible = !visible"/>
    </div>
  </div>
</template>

<script>
  import {Game} from 'bangbangboom-game';
  import notify from "src/lib/notifyUtil";
  import {readPlayerOptions} from "../lib/playerOptionUtil";

  export default {
    name: "Game",
    data: function () {
      return {
        boardWidth: document.body.clientWidth * 0.8,
        boardHeight: document.body.clientHeight * 0.05,
        direction: '',
        startPos: [0, 0],
        visible: true,
        backgroundImage: ''
      };
    },
    watch: {
      visible(v) {
        let board = document.getElementById('board');
        if (!v) {
          board.style.width = '58px';
          board.style.height = '58px';
          board.style.background = 'rgba(0, 0, 0, 1)';
          board.style.backgroundImage = '';
        } else {
          board.style.width = `${this.boardWidth}px`;
          board.style.height = `${this.boardHeight}px`;
          board.style.background = 'black';
          board.style.backgroundImage = this.backgroundImage;
          board.style.backgroundSize = 'cover';
        }
      }
    },
    methods: {
      handlePan({evt, ...info}) {
        if (this.visible) {
          let board = document.getElementById('board');
          if (info.isFirst) {
            this.boardWidth = Number(board.style.width.replace(/\s+|px/gi, ""));
            this.boardHeight = Number(board.style.height.replace(/\s+|px/gi, ""));
            this.direction = info.direction
          }

          if (this.direction === 'up' || this.direction === 'down') board.style.height = `${this.boardHeight + info.offset.y}px`;
          if (this.direction === 'left' || this.direction === 'right') board.style.width = `${this.boardWidth + info.offset.x}px`;

          if (this.boardHeight + info.offset.y <= 80) board.style.height = '80px';
          if (this.boardWidth + info.offset.x <= 100) board.style.width = '100px';

          if (info.isFinal) {
            this.boardWidth = Number(board.style.width.replace(/\s+|px/gi, ""));
            this.boardHeight = Number(board.style.height.replace(/\s+|px/gi, ""));
            this.$q.localStorage.set('BanG_Player_board', [this.boardWidth, this.boardHeight]);
          }
        } else return;
      }
    },
    mounted() {
      /*
      如果游戏配置或载入配置为空，退回到主页面
      是为了防止用户从游戏页面退出浏览器后，再次返回浏览器，配置丢失而导致载入失败
      */
      let gameConfig = this.$store.getters.gameConfig;
      let gameLoadConfig = this.$store.getters.gameLoadConfig;
      if (!gameConfig || !gameLoadConfig) {
        this.$router.push('/');
      }

      /*禁止ios缩放，双击和双指*/
      try {
        // 禁用双击缩放
        document.addEventListener("touchstart", function(event) {
          if (event.touches.length > 1) {
            event.preventDefault();
          }
        });
        let lastTouchEnd = 0;
        document.addEventListener(
          "touchend",
          function(event) {
            var now = new Date().getTime();
            if (now - lastTouchEnd <= 300) {
              event.preventDefault();
            }
            lastTouchEnd = now;
          },
          false
        );
        // 禁用双指手势操作
        document.addEventListener("gesturestart", function(event) {
          event.preventDefault();
        });
      } catch (error) {}

      let gameContainer = document.getElementById('gameContainer');
      let canvas = document.createElement('canvas');
      let board = document.getElementById('board');//上隐板
      canvas.id = 'game';
      canvas.style.height = '100%';
      canvas.style.width = '100%';

      let options = readPlayerOptions();
      if (options.upperHidden) {
        let boardRect = this.$q.localStorage.getItem('BanG_Player_board');
        if (!boardRect) boardRect = [500, 100];
        this.boardWidth = boardRect[0];
        this.boardHeight = boardRect[1];
        board.style.width = `${this.boardWidth}px`;
        board.style.height = `${this.boardHeight}px`;
        this.backgroundImage = `url(${options.upperHiddenImg})`;
        board.style.backgroundImage = this.backgroundImage;
        board.style.backgroundSize = 'cover';
      } else board.style.display = 'none';


      gameContainer.appendChild(canvas);
      let game = new Game(canvas, gameConfig, gameLoadConfig);
      game.start();
      game.ondestroyed = () => {
        gameContainer.removeChild(canvas);
        gameContainer.style.height = 0;
        this.$emit('destroy');
        this.$router.push('/');
      };
    }
  }
</script>

<style scoped>
  #gameContainer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
  }
</style>
